<template>
	<view :class="currentTheme">
		<a-nabbar name="门店详情" />
		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="u-padding-32">
			<item-box padding="20">
				<view class="u-padding-left-10 u-padding-right-10">
					<view class="u-flex u-row-between  u-col-top">
						<view class="u-flex u-flex-1"  style="width: 0;">
							<view class="box-title text-bold u-font-36 item-name u-margin-right-20 u-line-1">{{ form.name || '' }}</view>
							<view class="u-font-20 fans-tab u-margin-right-20">我的粉丝团{{ form.fansGroupCount || 0 }}</view>
						</view>
						<view  class="share u-position-relative">
							<u-icon name="zhuanfa" size="32" custom-prefix="custom-icon" :color="currentThemeObj.primary"></u-icon>
							<button open-type="share" class="open-share u-position-absolute"></button>
						</view>
					</view>
					<!-- 评分 和评论 -->
					<view class="u-padding-top-27 u-flex">
						<star :score="form.storeScore"></star>
						<text class="u-font-20 reply-color u-margin-left-34">{{ form.storeCommentCount || 0 }}条</text>
					</view>
					<!-- 标签 -->
					<view class="u-padding-top-15 u-flex u-flex-wrap" v-if="tags.length">
						<view class="u-margin-right-10 u-margin-bottom-10 " v-for="(c, i) in tags" :key="i">
							<u-tag :text="c" size="mini" shape="circle" bg-color="#EFEFEF" border-color="#EFEFEF" color="#B2B2B2" />
						</view>
					</view>
					<view class="u-margin-top-12"  @click.stop="mapAddress(form)">
						<u-icon name="weizhi" custom-prefix="custom-icon" :color="currentThemeObj.primary" size="24"></u-icon>
						<text class="u-font-28 text-order-time u-margin-left-10">{{ form.cityPath | cityPathFormat }}</text>
					</view>
					<view class="u-margin-top-12"  @click.stop="goIphone(form.dzphone)">
						<u-icon name="dianhua" custom-prefix="custom-icon" :color="currentThemeObj.primary" size="24"></u-icon>
						<text class="u-font-28 text-order-time u-margin-left-10">{{ form.dzphone || '暂无联系电话' }}</text>
					</view>
					<view class="u-font-20 text-order-time u-margin-top-20">
           <view class="u-flex u-row-bettew" >
            <view class="u-flex-1">营业状态：{{form.businessState || ''}}</view>
            <view class="u-flex-1">营业时间：{{form.dayTimeStart | dayTimeFormat}} - {{form.dayTimeEnd | dayTimeFormat}}</view>
           </view>
					<view class="u-flex u-margin-top-20">
            	<view class="u-flex-1">门店编号：{{ form.storeNo || ''}}</view>
						  <view class="u-flex-1">门店店长：{{ form.dzname || '' }}</view>
          </view>
           
					</view>
				</view>
			</item-box>
		</view>

		<!-- DM -->
		<view class="u-padding-32">
			<item-box padding="0">
				<view class="" v-if="form.dmUser && form.dmUser.length">
					<view class="u-flex u-padding-20 u-padding-left-30 content-desc-item u-font-26   storeProducts-title u-border-bottom u-padding-bottom">
						<view class="u-flex u-row-between"><view class="text-bold">DM</view></view>
						<view class="u-flex share u-position-relative" @click="goDmDetail(form.id)">
							<text>所有DM</text>
							<u-icon name="arrow-right" size="20" color="#1A1A1A"></u-icon>
						</view>
					</view>

					<scroll-view scroll-x :scroll-y="false" class="scroll-view-list">
						<view class="u-flex u-row-left u-margin-left-35">
							<template v-for="(c, index) in form.dmUser">
								<view  :key="index" class="u-margin-right-20 u-margin-top-20" @click="dmClick(c)" v-if="c">
								<item-image :img="c.avatar" :width="192" :height="300" :radius="10" />
								<view class="u-text-center u-line-1 u-text-center text-order-time u-font-22 nickname u-padding-left-10 u-padding-right-10">{{ c.nickname }}</view>
							</view>
							</template>
						</view>
					</scroll-view>
				</view>
			<view class="" v-else>
					<view class="u-flex u-padding-20 u-padding-left-30 content-desc-item u-font-26   storeProducts-title u-border-bottom u-padding-bottom">
						<view class="u-flex u-row-between"><view class="text-bold">DM</view></view>
						<view class="u-flex share u-position-relative"  @click="goDmDetail(form.id)">
							<text>所有DM</text>
							<u-icon name="arrow-right" size="20" color="#1A1A1A"></u-icon>
						</view>
					</view>

					<view class="u-padding-20 u-margin-left-10">
            <view class="unContent">暂未配置DM</view>
          </view>
			</view>
			</item-box>
		</view>

		<!-- 剧本 -->
		<view class="u-padding-32 u-padding-bottom-20">
			<item-box padding="0">
				<view class="" v-if="form.storeProducts && form.storeProducts.length">
					<view class="u-flex u-padding-20 u-padding-left-30 content-desc-item u-font-26   storeProducts-title u-border-bottom u-padding-bottom">
						<view class="u-flex u-row-between"><view class="text-bold">剧本</view></view>
						<view class="u-flex share u-position-relative"  @click="goStoteDetail(form.id)">
							<text>所有剧本</text>
							<u-icon name="arrow-right" size="20" color="#1A1A1A"></u-icon>
						</view>
					</view>

					<scroll-view scroll-x :scroll-y="false" class="scroll-view-list">
						<view class="u-flex u-row-left u-margin-left-30">
							<template v-for="(c, index) in form.storeProducts">
								<view :key="index" class="u-margin-right-20 u-margin-top-20" @click="dmClick(c)" v-if="c">
								<item-image :img="c.image" :width="192" :height="300" :radius="10" />
								<view class="u-text-center u-line-1 u-text-center text-order-time u-font-22 nickname u-padding-left-10 u-padding-right-10">{{ c.name }}</view>
							</view>
							</template>
						</view>
					</scroll-view>
				</view>
				<view class="" v-else>
					<view class="u-flex u-padding-20 u-padding-left-30 content-desc-item u-font-26   storeProducts-title u-border-bottom u-padding-bottom">
						<view class="u-flex u-row-between"><view class="text-bold">剧本</view></view>
						<view class="u-flex share u-position-relative"  @click="goStoteDetail(form.id)">
							<text>所有剧本</text>
							<u-icon name="arrow-right" size="20" color="#1A1A1A"></u-icon>
						</view>
					</view>

					<view class="u-padding-20 u-margin-left-10">
            <view class="unContent">暂未配置剧本</view>
          </view>
				</view>
			</item-box>
		</view>

    	<!-- 评价 -->
		<view class="u-padding-32">
 				<item-box :padding="0">
 					<view class="u-flex u-row-between u-padding-20" v-if="replyList.length">
 						<view class="">
 							<text class="text-bold">评价</text>
 							<!-- <text class="box-title u-font-24 u-margin-left-24"
 								v-if="replyListTotal>0">{{replyListTotal}}条</text> -->
 						</view>
 						<view class="box-title u-font-26" @click="moreReply">
 							查看更多 <u-icon name="arrow-right"></u-icon>
 						</view>
 					</view>
 					<view class="u-border-top" v-if="replyList.length">
 						<view class="u-padding-32">
 							<template v-if='replyList.length'>
 								<reply-item v-for="(item,index) in replyList" :key="index" :item="item"></reply-item>
 							</template>
 							<empty v-else :option="{tip:'暂无门店评价记录'}"></empty>
 						</view>
 					</view>

           <view class="" v-else>
					<view class="u-flex u-padding-20 u-padding-left-30 content-desc-item u-font-26   storeProducts-title u-border-bottom u-padding-bottom">
						<view class="u-flex u-row-between"><view class="text-bold">评论</view></view>
						<view class="u-flex share u-position-relative"  @click="moreReply">
							<text>所有评论</text>
							<u-icon name="arrow-right" size="20" color="#1A1A1A"></u-icon>
						</view>
					</view>

					<view class="u-padding-20 u-margin-left-10">
            <view class="unContent">暂无评论</view>
          </view>
				</view>
 				</item-box>
 			</view>
	</view>
</template>

<script>
import { getDetail } from '@/api/crud.js';
 	import replyItem from '@/components/replyItem/replyItem.vue'
export default {
  components:{
    replyItem
  },
	data() {
		return {
			apiModule: 'shopApi',
			apiType: 'systemStore',
			form: {
				storeScore:5
			},
      replyList:[],
      replyListTotal:0,
      option:{}
		};
	},
	onLoad(option) {
    this.option = option
		getDetail(option, this.apiType, this.apiModule, 'getDetails').then(res => {
			// DM和剧本只展示前三个, 后面的需要点击详情
			// let dmUserList = res.dmUser ? res.dmUser.slice(0, 3) : res.dmUser;
			// let storeProductsList = res.storeProducts ? res.storeProducts.slice(0, 3) : res.storeProducts;
			// console.log(dmUserList, storeProductsList, '怎么回事啊');
			// res = { ...res, dmUserList, storeProductsList };
			this.form = res;
			if (res.dzUser && res.dzUser.length) {
				const dzUser = res.dzUser.find(val => val.uid == res.dzUid);
				this.form.dzname = dzUser.nickname;
				this.form.dzphone = dzUser.phone;
				// this.getDz(dzUser)
			}
			this.form.dayTimeEnd = this.form.dayTimeEnd.split(' ')[1];
			this.form.dayTimeStart = this.form.dayTimeStart.split(' ')[1];
			if (res.cityPath) this.$set(this.form, 'cityAddress', this.cityPathFormat(res.cityPath));
		});

    getDetail({
 				storeId: option.id,
 				size: 5,
 				//storeId:option.storeId
 			}, 'systemStoreComment', 'shopApi', 'getSystemStoreComments').then(data => {
 				this.replyList = data.content.map(val => {
 					val.score = val.storeScore
 					val.imgs = val.image.split(',')
 					return val;
 				});
 				this.replyListTotal = data.totalElements
 			})
	},
	computed: {
		tags() {
			const str = (this.form && this.form.storeType) || '';
			return this.splitStr(str).filter(val => val) || [];
		},
		bannerList() {
			const img = this.splitStr(this.form.sliderImage);
			return img.map(this.imgFilter);
		}
	},
  filters: {
    dayTimeFormat(val){
      console.log(val,'开始时间');
	  if(!val) return ''
      return val.substring(0,5)
    }
  },
	methods: {
		//预览
		bannerListPreview(index) {
			this.previewUrls(this.bannerList, index);
		},
		splitStr(str) {
			return (str && str.split(',')) || [];
		},

		dmClick(item) {
			this.previewUrls([item.image]);
		},
		
    
		// 跳转到dm详情页
		goDmDetail(id){
      // if(!this.form.dmUser) { // 如果没有dm 就禁止跳转 因为那个页面没有数据会卡死
      //   return false
      // }
			this.$u.route({
				url:'pagesA/storeList/dmDetail',
         params: {
          id
        }
			})
		},

    // 跳转到剧本详情页
    goStoteDetail(id){
      console.log(id,'门店');
      this.$u.route({
				url:'pagesA/storeList/storeProducts',
        params: {
          id
        }
			})
    },
    
    //跳转评论详情
    moreReply(){
					this.$u.route({
					url: "/pagesA/replyManager/replyManager",
					params: {
						label: '门店评价',
						type: 'store',
						storeId: this.option.id
					}
				})
			},
      //拨打电话
			goIphone(iphone){
				if(!iphone) return false
				uni.makePhoneCall({
					phoneNumber: iphone
				})
			},
			// 门店导航
			mapAddress(item) {
				uni.openLocation({
					latitude: Number(item.latitude),//要去的纬度-地址
					longitude: Number(item.longitude),//要去的经度-地址
					name: item.name,//地址名称
					address: item.address,//详细地址名称
					success: function () {
						console.log('导航成功');
					},
					fail: function (error) {
						console.log(error)
					}
				});
			},
	}
};
</script>

<style lang="scss" scoped>
.scroll-view-list {
	height: 380rpx;
	padding-right: 30rpx;
}
.nickname {
	width: 192rpx;
	box-sizing: border-box;
}

.storeProducts-title {
	display: flex;
	justify-content: space-between;
}

.fans-tab {
	width: 150rpx;
	flex: 0 0 150rpx;
	text-align: center;
  background:linear-gradient(to right,#765cfe,#ac5cfe);
  border-radius: 8rpx;
  padding: 5rpx 0;
  color: #fff;
}

.unContent {
  height: 300rpx;
  width: 100%;
  text-align: center;
  line-height: 300rpx;
  color: #999;
  font-size: 20rpx;
}

.share {
		.open-share {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
